Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Defining UI Colour Palette
Highest Rated
Rating: 4.9 out of 5(10 ratings)
34 students

Defining UI Colour Palette

Choosing UI colours for the websites, web and mobile apps.
Highest Rated
Created byMax Karacun
Last updated 10/2022
English

What you'll learn

  • Principles behind the great colour palette
  • Understand different types of colours required for the UI
  • Creating a comprehensive UI colour palette
  • Be able to check colours for accessibility
  • Colour psychology and emotions associated with different colours
  • Understand better your brand personality
  • How to pick colours that match your brand personality
  • Why you will need multiple variations of the same colour
  • How to define multiple variations of each colours
  • Learn how to apply colour to your product

Course content

1 section • 14 lectures • 1h 24m total length

  • Course Project1:11

    Define a cohesive ui colour palette for Epic Trails, a curated hiking trails webapp, to give the app a more professional and easy-to-browse look.

  • Colour groups inside the palette4:39
  • Principles of Colour Usage (I)3:36

    Learn how to define a professional UI color palette by applying hierarchical colors to establish visual weight, using the squint test to guide emphasis, and ensuring legibility and accessibility.

  • Principles of Colour Usage (II)2:08

    Define a color palette and apply color consistently to create hierarchical, legible, and expressive user interfaces that reflect your brand personality.

  • Colour Accessibility4:34
  • Step 1: Define your brand identity4:38

    Define your brand identity through a structured primary color selection, aligning color psychology with brand personality, and selecting the top three traits to guide shade choices.

  • Step 2: Colour Psychology2:45

    Match your brand personality to color meanings through color psychology. Explore green and yellow as primary options, with white as background, testing shades and cultural associations before deciding.

  • Step 3: Finding the Right Shade7:27

    Explore primary color shades by sampling multiple options from predefined palettes, test their appearance on buttons, check contrast for accessibility, and pick a green palette for a hiking app.

  • Defining Primary Colour Palette5:56

    Define primary color palette by selecting a base color and deriving lighter and darker shades in HSL, then test contrast for accessibility and apply them to buttons, headers, and links.

  • Defining Secondary Colour (I)8:21

    Explore how secondary or accent colors complement primary UI colors, with examples of harmony options such as complementary, analogous, triadic, and monochromatic, and how to choose a secondary color.

  • Defining Secondary Colour (II)6:19

    Use Adobe color tool to explore secondary color options from your primary color, trying analogous, monochromatic, and triad harmonies. Save candidates in Figma, test accessibility, and pick a final color.

  • Defining Neutral Colours11:03

    Define a neutral color palette by selecting seven gray shades, testing contrast and accessibility for backgrounds, borders, text, and icons using a shade generator and banner testing.

  • Defining Semantic Colours7:04

    Define semantic colors in a UI palette using red for errors, yellow for warnings, green for success, and blue for info, plus visualization colors; test accessibility and apply to banners.

  • Applying Colour Palette to UI14:33

    Apply a defined color palette to a UI by saving colors as styles in Figma and applying primary, neutral, and semantic colors. Iterate to improve contrast, accessibility, and brand personality.

Requirements

  • No prior design knowledge or experience is required
  • No knowledge of any tools is required

Description

In this course, I will share with you the step-by-step process of picking the UI colours for a website, web or mobile app. By the end of this course, you will be able to define a UI colour palette that will make your product look much more aesthetically pleasing and professionally designed.

This course is aimed at designers, developers, entrepreneurs or anyone who needs to pick colours for a digital product. You don’t need to have any prior design knowledge for this course.

This is not a boring colour theory course. This course is concise and to the point, cutting all the unnecessary fluff. The lessons are highly practical, and filled with real-life examples. I will be using a hiking web app called Epictrails, as an example to demonstrate the process of defining UI colours in a real-life project, so that you can follow along and repeat the process for your product.

We will cover in this course:

  • Principles behind a great colour palette

  • Break down and understand the different colour types required for the UI

  • How to ensure that your colours are accessible

  • Help you define the brand personality

  • How to pick colours that match your brand personality

  • Creating a comprehensive and professional UI colour palette

  • Learn how to apply colour to UI

  • Tools and resources that will speed you up and help you to define colours for your palette.

Who this course is for:

  • Designers, Developers and Entrepreneurs

Report abuse